import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import Lunb from '../../Compution/Lunb'
import { useSelector } from 'react-redux'
import { Card, Toast } from 'antd-mobile'
import styles from './home.module.css'
import axios from 'axios'
import { HeartFill ,MovieOutline} from 'antd-mobile-icons'
function Index() {
  const navigate=useNavigate()
  const { start, end } = useSelector(state => state.City)
  const [hilistt,sethilistt]=useState(JSON.parse(localStorage.getItem('hilistt')) || [])
  const xuanRan =async () => {
     const res = await axios.get('/api/list')
        console.log(res,'res==')
    const { code, data, message } = res.data
        if (code == 200) {
          Toast.show(message)
          sethilistt([...hilistt,...data])
        }
  }
  useEffect(() => {
    xuanRan()
  }, [])
  // const dj = (item) => {
  //   const coll = hilistt.some((it) => it.id === item.id)
  //   if (coll)
  //   {
  //     const qxsc = hilistt.filter((it) => it.id !== item.id)
  //     sethilistt(qxsc)
      
  //     localStorage.setItem('hilistt', JSON.stringify([...hilistt, item]))
  //   }
  //   else
  //   {
  //      sethilistt([...hilistt, item])
  //       localStorage.setItem('hilistt',JSON.stringify([...hilistt,item]))
      
  //   }
  // }
  const dj = (item) => {
    const colp =hilistt.some(it => it.id === item.id)
    if (colp)
    {
      const qxsc=hilistt.filter(it => it.id !== item.id)
      sethilistt(qxsc)
      localStorage.setItem('hilistt',JSON.stringify([...hilistt,item]))
    }
    else
    {
      sethilistt([...hilistt, item])
      localStorage.setItem('hilistt',JSON.stringify([...hilistt,item]))
    }
  }
  return (
    <div>
      <Lunb></Lunb>
      <div>
        <span onClick={()=>navigate('/city/start')}>{start }</span>
        <span onClick={()=>navigate('/city/end')}>{end }</span>
       
      </div>
      <div>
        <Card title='最新活动' extra={<div className={styles.xm}>查看全部</div>}>
          <div style={{width:'100%'}}>
            <div style={{display:'flex', overflowY:'scroll'}}>
              {
                  hilistt.length>0&&hilistt.map((item,index)=>{
                    return <div>
                      <div>
                      
                        <img src={item.image} style={{width:'150px', height:'150px'}} alt="" />
                        <p>{item.title}</p>
                        <p>{item.date}</p>
                      </div>
                       <HeartFill
                          fontSize={26}
                          onClick={() => dj(item)}
                          color={hilistt.some((it)=>it.id===item.id) ? 'red' : '#ccc'}
                        />
                    </div>
                  })
               }
            </div>
          </div>
         </Card>
      </div>
      <div className={styles.sz}>
        <MovieOutline fontSize={25} onClick={()=>navigate('/detail')} />
      </div>
    </div>
  )
}

export default Index
